<template>
  <div class="pageinations">
    <div class="pageination_align">
      <div class="pageination" v-if="pageinationTotal!=0">
        <div @click="pageUp(1)" class="pagination_page" :class="startDisabled?'disabled':''">上一页</div>
        <div @click="pageUp(0)" class="pagination_page" :class="1==pageinationCurrentPage?'pagination_page_active':''">1</div>
        <div class="ellipsis pagination_page" v-if="preEllipsis">...</div>
        <div class="pagination_page" :class="item==pageinationCurrentPage?'pagination_page_active':''" v-for="item in pageinationLength" @click="jump(item)">
            {{item}}
        </div>
        <div class="ellipsis pagination_page" v-if="nextEllipsis">...</div>
        <div @click="pageDown(0)" v-if="pageinationPage>1" class="pagination_page" :class="pageinationPage==pageinationCurrentPage?'pagination_page_active':''">
            {{pageinationPage}}
        </div>
        <div @click="pageDown(1)" class="pagination_page" :class="endDisabled?'disabled':''">下一页</div>
        <div class="pagination_page  pagination_page_right">共{{pageinationTotal}}条</div>
        <div class="jump_page"><span>跳转到</span><input  class="jumpNum" v-model="jumpNum">页<button @click="jumpNumFn()">确定</button></div>
      </div>
    </div>
  </div>
</template>
<script>
	export default {
	  name:'pageinations',
	  props: ['total', 'size', 'page', 'changge'],
	  data:function() {
	    return {
	      pageinationTotal: this.total,//总条目数
	      pageinationSize: this.size ? this.size : 10,//每页显示条目个数
	      pageinationLength: [],
	      pageinationCurrentPage: this.page ? this.page : 1,//当前页数默认1
	      pageinationPage: 0,//可分页数
	      startDisabled: true,//是否可以点击首页上一页
	      endDisabled: true,//是否可以点击尾页下一页
	      pageChangge: this.changge,//修改方法
	      nextEllipsis:false,
	      preEllipsis:false,
	      jumpNum:"",//输入页码跳转
	    }
	  },
	  methods: {
	    jump:function(item) {
	      this.pageinationCurrentPage = item;
	      this.$emit('child',this.pageinationSize);
	      this.pagers();
	      this.pageChangge(this.pageinationCurrentPage);
	    },//跳转页码
	    jumpNumFn:function(){
	      //判断是否是数字，范围，0-最大
	      var jumpVal=this.jumpNum.trim();
	      var  jumps=/^[+]{0,1}(\d+)$/;
	      if(!jumps.test(jumpVal)){
	        layer.alert("请输入正确的页码数！");
	      }else if(jumpVal<1||jumpVal>this.pageinationPage){
	        layer.alert("请输入正确的页码数！");
	      }else {
	        this.jump(jumpVal);
	      }
	    },
	    pagers:function() {
	      //可分页数
	      this.pageinationPage = Math.ceil(this.pageinationTotal / this.pageinationSize);
	      if(!this.pageinationCurrentPage){
	        this.pageinationCurrentPage+='';
	      }
	      //是否可以点击上一页首页
	      this.startDisabled = this.pageinationCurrentPage != 1 ? false : true;
	      //是否可以点击下一页尾页
	
	      this.endDisabled = this.pageinationCurrentPage != this.pageinationPage ? false : true;
	      if (this.pageinationPage == 0) this.endDisabled = true;
	      //重置
	      this.pageinationLength = [];
	      //开始页码1
	      var start = this.pageinationCurrentPage - 4 > 1 ? this.pageinationCurrentPage - 4 : 1;
	      //当前页码减去开始页码得到差
	      var interval = this.pageinationCurrentPage - start;
	      //最多9个页码，总页码减去interval 得到end要显示的数量+
	      var end = (9 - interval) < this.pageinationPage ? (9 - interval) : this.pageinationPage;
	      //最末页码减开始页码小于8
	      if ((end - start) != 8) {
	        //最末页码加上与不足9页的数量，数量不得大于总页数
	        end = end + (8 - (end - start)) < this.pageinationPage ? end + (8 - (end - start)) : this.pageinationPage;
	        //最末页码加上但是还不够9页，进行开始页码追加，开始页码不得小于1
	        if ((end - start) != 8) {
	          start = (end - 8) > 1 ? (end - 8) : 1;
	        }
	      }
	      if(this.pageinationPage>9){
	        //前省略号
	        this.preEllipsis=this.pageinationCurrentPage-1>4?true:false;
	        //后省略号
	        this.nextEllipsis=this.pageinationPage-this.pageinationCurrentPage>4?true:false;
	      }else{
	        this.preEllipsis=false;
	        this.nextEllipsis=false;
	      }
	      if(this.pageinationPage>1){
	        for (var i = start+1; i < end; i++) {
	          this.pageinationLength.push(i);
	        }
	      }
	    },//计算分页显示的数字
	    pageUp:function(state) {
	      if (this.startDisabled) return;
	      if (this.pageinationCurrentPage - 1 != 0 && state == 1) {
	        this.jump(this.pageinationCurrentPage - 1);
	      } else {
	        this.jump(1);
	      }
	    },//上一页跟首页 state=1是上一页 state=0是首页
	    pageDown:function(state) {
	      if (this.endDisabled) return;
	      if (this.pageinationCurrentPage + 1 != this.pageinationPage && state == 1) {
	        this.jump(this.pageinationCurrentPage + 1);
	      } else {
	        this.jump(this.pageinationPage);
	      }
	    },// state=1是下一页 state=0是尾页
	    pageCurrentChange:function() {
	      this.pageChangge(this.pageinationCurrentPage);
	      this.pagers();
	    }
	  },
	  created:function() {
	      this.pageCurrentChange();
	  },
	  watch: {
	    total: function (val, oldVal) {
	        this.pageinationTotal = val;
	        this.pagers();
	    },
	    page: function (val, oldVal) {
	        this.pageinationCurrentPage = val;
	        this.pagers();
	    }
	  }
	}
</script>
<style scoped >
  @import "pageination.css"
</style>
